<template>
  <view class="login-container">
    <!-- 底部波浪动画 -->
    <view class="wave-container">
      <view class="wave"></view>
    </view>
    
    <!-- 顶部Logo和标题 -->
    <view class="logo-container">
      <view class="logo">
        <text class="logo-text">NTU</text>
      </view>
      <text class="school-name">南通大学</text>
    </view>
    
    <!-- 登录表单 -->
    <view class="form-container">
      <view class="form-title">账号登录</view>
      <view class="input-group">
        <input type="text" class="input-field" placeholder="请输入学号/工号" v-model="username" />
      </view>
      <view class="input-group">
        <input type="password" class="input-field" placeholder="请输入密码" v-model="password" />
      </view>
      <button class="login-btn" @tap="handleLogin">登 录</button>
      <view class="extra-links">
        <text class="link-text" @tap="forgotPassword">忘记密码?</text>
        <text class="link-text" @tap="goToRegister">注册账号</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  onLoad() {},
  methods: {
    handleLogin() {
      if (!this.username || !this.password) {
        uni.showToast({
          title: '请输入账号和密码',
          icon: 'none'
        });
        return;
      }
      
      // 模拟登录过程
      uni.showLoading({
        title: '登录中...'
      });
      
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '登录成功！',
          icon: 'success'
        });
        
        // 登录成功后可以跳转到其他页面
        // uni.switchTab({
        //   url: '/pages/home/home'
        // });
      }, 1500);
    },
    forgotPassword() {
      uni.showToast({
        title: '忘记密码功能开发中',
        icon: 'none'
      });
    },
    goToRegister() {
      uni.navigateTo({
        url: '/pages/register/register'
      });
    }
  }
}
</script>

<style>
.login-container {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #1e3c72;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

/* 波浪动画 */
.wave-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120rpx;
  overflow: hidden;
}

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: url('');
  background-repeat: repeat-x;
  animation: wave 15s linear infinite;
}

@keyframes wave {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Logo和标题 */
.logo-container {
  margin-top: 120rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}

.logo {
  width: 180rpx;
  height: 180rpx;
  background-color: #fff;
  border-radius: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-text {
  font-size: 80rpx;
  font-weight: bold;
  color: #1e3c72;
}

.school-name {
  margin-top: 30rpx;
  font-size: 48rpx;
  font-weight: bold;
  color: #fff;
}

/* 登录表单 */
.form-container {
  width: 85%;
  background-color: #f5f5f5;
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  margin-top: 80rpx;
  box-shadow: 0 10rpx 25rpx rgba(0, 0, 0, 0.1);
  z-index: 1;
  box-sizing: border-box;
}

.form-title {
  font-size: 44rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 50rpx;
}

.input-group {
  margin-bottom: 30rpx;
  width: 100%;
}

.input-field {
  width: 100%;
  height: 90rpx;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 0 30rpx;
  font-size: 32rpx;
  box-sizing: border-box;
}

.login-btn {
  width: 100%;
  height: 90rpx;
  background: #1e3c72;
  color: #fff;
  border-radius: 10rpx;
  font-size: 36rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20rpx;
}

.extra-links {
  display: flex;
  justify-content: space-between;
  margin-top: 30rpx;
}

.link-text {
  font-size: 28rpx;
  color: #1e3c72;
}
</style>
